<template>

  <div class="container">
    <div class="toggle-icon" v-on:click="menu_click">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </div>

  
</template>


<script lang="ts">
import { gsap } from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger";




export default defineComponent ({

  async setup(){
    gsap.registerPlugin(ScrollTrigger)


    const menu_click = async() => {
      document.querySelector('.container')?.classList.toggle('active')
    }



    onMounted(() => {

    })


    return{
      menu_click
    }


  }



})
</script>



<style scoped>

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.toggle-icon {
  position: relative;
  width: 100%;
  height: 100%;
}

.bar {
  width: 0.6em;
  height: 0.1rem;
  border-right: 0.4em solid rgb(255, 255, 255);
  border-left: 0.2em solid rgb(255, 255, 255);
  display: block;
  box-sizing: border-box;
  margin: 0.1em;
  transition: all 600ms;
}


.bar:nth-of-type(2){
  transform: rotate(-180deg);
}


.active .bar:nth-of-type(1){
  opacity: 0;
}

.toggle-icon .bar:nth-of-type(1){
  transition: opacity 300ms ease-in-out;
}

.active .bar:nth-of-type(2){
  transform: rotate(-139deg) translateX(0.08em) translateY(0.02em);
}

.active .bar:nth-of-type(3){
  transform: rotate(-40deg) translateX(0.1em) translateY(-0.2em);

}




</style>